<html>

<head>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        .container {
            width: 600px;
        }

        .w3-theme {
            color: #fff !important;
            background-color: #4CAF50 !important;
        }

        .w3-boxmodel {
            font-family: "Lato", sans-serif;
        }

        .w3-boxmodel {
            margin: 30px 0;
        }

        .w3-boxmodel .margin {
            background: #f1f1f1;
            padding: 45px;
            width: 100%;
            height: 100%;
            position: relative;
            border: 2px dashed #bbb;
            transition: all .25s ease-in-out;
        }

        .w3-boxmodel .margin:before {
            content: "Margin";
            font-size: 1.4em;
            position: absolute;
            left: 0;
            top: 1.8%;
            width: 100%;
            text-align: center;
        }

        .w3-boxmodel .border {
            padding: 45px;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .w3-boxmodel .border:before {
            content: "Border";
            font-size: 1.4em;
            color: black;
            position: absolute;
            left: 0;
            top: 2.5%;
            width: 100%;
            text-align: center;
        }

        .w3-boxmodel .padding {
            color: black;
            padding: 45px;
            width: 100%;
            height: 100%;
            position: relative;
            background: #f1f1f1;
        }

        .w3-boxmodel .padding:before {
            content: "Padding";
            font-size: 1.4em;
            position: absolute;
            left: 0.5%;
            top: 3.7%;
            width: 100%;
            text-align: center;
        }

        .w3-boxmodel .content {
            padding: 20px;
            width: 100%;
            height: 100%;
            position: relative;
            background: white;
            border: 2px dashed #bbb;
        }

        .w3-boxmodel .content:before {
            content: "Content";
            font-size: 1.4em;
            display: block;
            text-align: center;
            line-height: 3.5;
        }

        @media screen and (max-width: 450px) {
            .w3-boxmodel .margin {
                padding: 35px;
            }

            .w3-boxmodel .margin:before {
                font-size: 1em;
                left: 0;
                top: 2.5%;
            }

            .w3-boxmodel .border {
                padding: 35px;
            }

            .w3-boxmodel .border:before {
                font-size: 1em;
                left: 0;
                top: 3.2%;
            }

            .w3-boxmodel .padding {
                padding: 35px;
            }

            .w3-boxmodel .padding:before {
                font-size: 1em;
                left: 0.5%;
                top: 4.5%;
            }

            .w3-boxmodel .content {
                padding: 20px;
            }

            .w3-boxmodel .content:before {
                font-size: 1em;
            }
        }

        @media screen and (max-width: 360px) {
            .w3-boxmodel .margin {
                padding: 25px;
            }

            .w3-boxmodel .margin:before {
                font-size: 0.9em;
                left: 0;
                top: 1.5%;
            }

            .w3-boxmodel .border {
                padding: 25px;
            }

            .w3-boxmodel .border:before {
                font-size: 0.9em;
                left: 0;
                top: 2.2%;
            }

            .w3-boxmodel .padding {
                padding: 25px;
            }

            .w3-boxmodel .padding:before {
                font-size: 0.9em;
                left: 0.5%;
                top: 2.5%;
            }

            .w3-boxmodel .content {
                padding: 15px;
            }

            .w3-boxmodel .content:before {
                font-size: 0.9em;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="w3-boxmodel">
            <div class="margin">
                <div class="border w3-theme">
                    <div class="padding">
                        <div class="content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>